<template>
 
  <div id="app">
    <!-- <h1>{{phone|phoneFilter}}</h1> -->

    <!-- 搜索框 -->
    
    <!-- 下面 -->
    <!-- 动态组件 ,根据下标的变化，动态的切换组件（卸载上一个组件，挂载下一个组件）-->

    <!-- 动画组件，transition  其中name 属性可以规定动画名称的前缀，mode设置入场动画 和离场动画的播放顺序 
    out-in先出后入
    in-out 先入后出
   -->
    <transition name="fade" mode="out-in">

        <!-- 缓存组件keep-live 内部的组件在切换时，会缓存起来，不需要显示的组件会缓存起来（而不是销毁） 当组件重新显示时，只是从缓存中取出显示即可，不会重新实例化-->

        <!-- 使用了缓存组件以后，对于多个需要切换的组件，当组件不显示的时候，会被缓存，当组件第一次显示的时候，会实例化和挂载 -->

        <!-- created 已实例化
             mounted 以挂载
            destroyed 已销毁
            activated 已激活 
            deactivated 缓存了
        -->

        <keep-alive > <component  :is="coms[currentIndex]"/></keep-alive>
   
</transition>
    <div class="tabber">
         <div v-for="(item,index) in tablist" :key="index" @click="headleClick(index)" class="tab" :class="{active:currentIndex == index}">
             {{item}}
         </div>
  </div>

  </div>
</template>

<script>

import sy from "./components/sy.vue"
import bbt from './components/bbt.vue'
import dingd from './components/dingd.vue'
import wod from './components/wod.vue'
export default {
  data(){
         return {
             currentIndex:0,
             tablist:[
                 "首页",
                 "爆爆团",
                 "订单",
                 "我的"
             ],
             coms:[sy,bbt,dingd,wod]
         }
     },
     methods:{
        headleClick(index){
            this.currentIndex = index
        },
        
     },
  // components:{  

  //   Swiper,
  //   List,Search



  // },
 
}
</script>

<style lang="scss" scoped>
  *{
           margin: 0;
           padding: 0;
       }
       .tabber{
         width: 100%;
         height: 50px;
         background-color: #999;
           position: fixed;
           bottom:0;
           display: flex;
           justify-content: space-around;
          /* margin: 0 20px;            */
          margin: 10px 0;
          border-top:1px solid #999;
     }
     .tabber .tab{
         padding: 10px;
     }

     .active{
         color:blue
     }   
     
    // 入场动画
     .fade-enter{ //动画开始时
            opacity: 0;
     }

     .fade-enter-active{
         transition: all 0.2 s;
     }

     .fade-enter-to{  //动画结束时的状态
            opacity: 1;
     }

     .fade-leave{ //动画开始时
            opacity: 1;
     }

     .fade-leave-active{
         transition: all 0.2s;
     }

     .fade-leave-to{  //动画结束时的状态
            opacity: 0;
     }
</style>
